<template>
  <div class="home">
    <my-swipe :url="getlunbo"/>
    <div class="grid">
      <my-ul class="flex-wrap">
        <my-li class="item" v-for="(grid, index) in grids" :key="index">
          <router-link :to="grid.router">
            <span :class="grid.className"></span>
            <p>{{grid.title}}</p>
          </router-link>
        </my-li>
      </my-ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgs: [],
      getlunbo: 'getlunbo',
      grids: [
        {
          className: 'cms-news',
          title: '新闻资讯',
          router: { name: 'news.list' }
        },
        {
          className: 'cms-photo',
          title: '图文分享',
          router: { name: 'photo.list', params: { categoryId: 0 } }
        },
        {
          className: 'cms-goods',
          title: '商品展示',
          router: { name: 'goods.list' }
        },
        {
          className: 'cms-feedback',
          title: '留言反馈',
          router: { name: 'news.list' }
        },
        {
          className: 'cms-search',
          title: '搜索资讯',
          router: { name: 'news.list' }
        },
        {
          className: 'cms-callme',
          title: '联系我们',
          router: { name: 'news.list' }
        }
      ]
    }
  }
}
</script>
<style lang="less" scoped>
.home {
  .mint-swipe {
    height: 200px;
    img {
      width: 100%;
      object-fit: fill;
    }
  }
}

a {
  display: inline-block;
  text-decoration: none;
}
p {
  color: #000;
  white-space: wrap;
}
.grid span {
  display: block;
  margin: 10px 0;
  width: 4rem;
  height: 4rem;
  margin: 0 auto;
  background-repeat: round;
}
.cms-news {
  background-image: url(../../assets/img/news.png);
}
.cms-photo {
  background-image: url(../../assets/img/picShare.png);
}
.cms-goods {
  background-image: url(../../assets/img/goodsShow.png);
}
.cms-feedback {
  background-image: url(../../assets/img/feedback.png);
}
.cms-search {
  background-image: url(../../assets/img/search.png);
}
.cms-callme {
  background-image: url(../../assets/img/callme.png);
}
</style>
